<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>登录 - Fxh.Go</title>
    <link rel="stylesheet" href="/static/css/common.css"/>
    <style>
        #login-form{
            width: 280px;
            margin: 80px auto;
        }
        #login-form h1{
            margin-bottom: 12px;
        }
    </style>
</head>
<body>
<form id="login-form" class="form form-vertical" action="#" method="post" name="login-form">
    <h1>登录 - Fxh.Go</h1>
    <p class="field">
        <label for="user">用户名</label>
        <input class="ipt" id="user" type="text" required="required" name="user"/>
        <span class="invalid lbl lbl-red hide" id="user-invalid">用户名为字母+数字，长度4-20个字符</span>
    </p>
    <p class="field">
        <label for="password">用户密码</label>
        <input class="ipt" id="password" type="password" required="required" name="password"/>
        <span class="invalid lbl lbl-red hide" id="password-invalid">密码长度4-20个字符</span>
    </p>
    <button class="btn btn-blue">登 录</button>
    <span class="tip">默认记住登陆3天</span>
</form>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/static/lib/validate.min.js"></script>
<script src="/static/lib/jquery.form.min.js"></script>
<script>
    $(function () {
        new FormValidator("login-form", [
            {"name": "user", "rules": "alpha_numeric|min_length[4]|max_length[20]"},
            {"name": "password", "rules": "required|min_length[4]|max_length[20]"}
        ], function (errors, e) {
            e.preventDefault();
            $('.invalid').hide();
            if (errors.length) {
                $("#" + errors[0].id + "-invalid").removeClass("hide").show();
                return;
            }
            $('#login-form').ajaxSubmit({
                dataType: "json",
                success: function (json) {
                    if (!json.res) {
                        alert("登录错误，请检查用户或密码");
                    } else {
                        window.location.href = "/admin/";
                    }
                }
            });
        })
    });
</script>
</body>
</html>